<template>
  <div class="index">
    <Header></Header>
    <div class="main">
      <p class='current-nav'>当前位置 : <router-link to='index'>首页</router-link> <i> > </i>搜索</p>

      <div class="infor search">
        <div class="form-container">
          <el-form :inline="true"
		  style='display:flex;justify-content:center;'
                   :model="formInline"
                   class="demo-form-inline clearfix">
            <el-form-item label="应急预案分类 : " >
					<el-select v-model="formInline.planCategory" >
						<el-option v-for='(item,index) in types' :label="item.name" :value="item.value" :key='index'></el-option>
					</el-select>
				</el-form-item>
            <el-form-item label="关键字 : ">
              <el-input v-model="formInline.companyEmergencyName"
                        style='width:300px;'></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="onSubmit"
                         class='sure' style="text-align:center"><i class="el-icon-search"></i> 搜索</el-button>
              <el-button @click="reserve" class='sure' style="text-align:center">
                        <i class="el-icon-refresh"></i>
                        重置</el-button>
            </el-form-item>
          </el-form>
          <el-table ref="multipleTable" :data="data1" tooltip-effect="dark" v-loading = 'loading'>
				<el-table-column type="index" align='center' label='序号' width="150">
          <template slot-scope='scope'>
									{{(currentPage-1)*10+scope.$index+1}}
								</template>
				</el-table-column>
				<el-table-column prop="planCategory" label="应急预案类别" align='center' show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="planName" label="应急预案模板" align='center' show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="companyEmergencyName " label="企业应急预案" align='center' show-overflow-tooltip>
				<template slot-scope="scope">
					{{!scope.row.companyEmergencyName ? '/' : scope.row.companyEmergencyName }}
				</template>
				</el-table-column>
				<el-table-column label="操作" align='center'>
					<template slot-scope="scope">
						<el-button class='detail-btn' @click='downData(scope.row.id)' ><i class="el-icon-download">下载</i></el-button>
					</template>
				</el-table-column>
			</el-table>
          <div class="page-container">
            <el-pagination :pager-count='5'
                           @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-size="10"
                           layout="total, prev, pager, next, jumper"
                           :total="total">
            </el-pagination>
            <el-button>确定</el-button>
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import Header from '../common/header'
import Footer from '../common/footer'
import config from '../../config.js'
export default {
  components: {
    Header,
    Footer
  },
  data () {
    return {
     formInline: {
					companyEmergencyName:"" ,
					companyId: "",
					planCategory: ""
				},
        data1: [],
        loading: false,
				types:[
						{
						name:'全部',
						value:''
					},
					{
						name:'综合预案',
						value:'1'
					},
						{
						name:'专项预案',
						value:'2'
					},
						{
						name:'现场处置预案',
							value:'3'
					}
				],
				currentPage: 1,
        pageIndex:1,
				total:0
    };
  },
  methods: {
    handleCurrentChange(val) {

        this.currentPage = val
        this.getDataList()
      },
    onSubmit() {
      this.getDataList()
    },
    downData(id){
        this.$axios
        ({
          method: 'post',
            url: config.baseUrl+"emergency/downLoad?id="+id,
        }).then(
            (res)=>{
                if(res.data.meta.success){
                  if(res.data.meta.message){
                    window.location.href=res.data.data
                  }else{
                    this.$message.warning('下载文件为空')
                  }
                }else{

                  this.$message.warning(res.data.meta.message)
                }
            }
        )
    },
    getDataList(){
        this.loading = true
        let params ={
            companyEmergencyName:this.formInline.companyEmergencyName ,
            companyId: JSON.parse(localStorage.getItem('user')).companyId,
            planCategory:this.formInline.planCategory,
            pageIndex:this.currentPage,
            pageSize:10
        }
        this.$axios
        ({
          method: 'post',
            url: config.baseUrl+"emergency/v1.0/plan/list",
            data:params
        }).then(
            (res)=>{
                this.loading = false
                if(res.data.meta.success){
                  res.data.data.records.map((item)=>{
                    if(item.planCategory ==1){
                      item.planCategory ='综合预案'
                    }else if(item.planCategory ==2){
                            item.planCategory ='专项预案'
                    }else{
                      item.planCategory ='现场处置预案'
                    }
                  })
                  this.data1 = res.data.data.records
                  this.total = res.data.data.total
                }else{
                  this.data1 = []
                  this.total = 0
                  this.$message.warning(res.data.meta.message)
                }
            }
        )
    },
    reserve(){
          this.formInline.planCategory = "";
          this.currentPage = 1;
          this.formInline.companyEmergencyName = "";
          this.getDataList()
    },
  },
  created () {
    this.formInline.companyEmergencyName = this.$route.params.companyEmergencyName
    this.formInline.planCategory = this.$route.params.planCategory
    this.getDataList()
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
@import "../../../static/css/information.less";
.search {
  .form-container {
    padding: 0 0 70px;
    margin: 0 auto;
    .el-form {
      width: 1102px;
      height: 36px;
      margin: 30px auto;

      .el-input {
        width: 182px;
        margin-right: 12px;
      }
      .el-button {
        width: 80px;
        height: 36px;
        border-radius: 8px;
        padding: 0;
        color: #fff;
        text-align: left;
        img {
          width: 18px;
          margin: 0 4px 0 12px;
        }
      }
      .el-button.sure {
          background: #4080ff;
        background: linear-gradient(90deg, #6eb1ff 20%, #3372ff 80%);
      }
      .el-input__inner {
        height: 36px;
      }
    }
    .el-table {
      width: calc(100% - 200px);
      margin: 0 auto;
      border-top: 1px solid #ebeef5;
    }
    .detail-btn {
      border: 0;
      color: #4180ff;
      background: #f7f6fe;
      border-radius: 8px;
    }
    .page-container {
      width: 620px;
      margin: 50px auto;
      padding: 0;
    }
  }
}
</style>
